<template>
  <div v-if="show" class="modal-overlay" @click.self="closeModal">
    <div class="modal-content model-management-modal">
      <div class="modal-header">
        <h2>模型管理</h2>
        <button @click="closeModal" class="close-button">&times;</button>
      </div>
      <div class="modal-body">
        <button @click="openAddModelForm" class="add-model-button">新增模型</button>
        <table class="models-table">
          <thead>
            <tr>
              <th>显示名称</th>
              <th>模型名称 (内部)</th>
              <th>API Base URL</th>
              <th>启用</th>
              <th>测试连接</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-if="models.length === 0">
              <td colspan="6" style="text-align: center;">暂无模型配置。</td>
            </tr>
            <tr v-for="model_item in models" :key="model_item.id">
              <td>{{ model_item.display_name }}</td>
              <td>{{ model_item.model_name_internal }}</td>
              <td>{{ model_item.api_base_url || '-' }}</td>
              <td>
                <label class="switch">
                  <input type="checkbox" :checked="model_item.is_enabled" @change="toggleModelEnabled(model_item)" :disabled="isProcessing">
                  <span class="slider round"></span>
                </label>
              </td>
              <td>
                <button @click="testModelConnection(model_item.id)" :disabled="modelTestResults[model_item.id]?.testing || !model_item.is_enabled" class="test-button small-button">
                  {{ modelTestResults[model_item.id]?.testing ? '测试中...' : '测试' }}
                </button>
                <div v-if="modelTestResults[model_item.id]"
                     :class="['test-result', modelTestResults[model_item.id].success ? 'test-success' : 'test-failure']">
                  {{ modelTestResults[model_item.id].message }}
                </div>
              </td>
              <td>
                <button @click="openEditModelForm(model_item)" class="edit-button small-button">编辑</button>
                <button @click="deleteModel(model_item.id, model_item.display_name)" class="delete-button small-button">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

defineProps({
  show: Boolean,
  models: Array,
  isProcessing: Boolean,
  modelTestResults: Object,
});

const emit = defineEmits([
  'close',
  'open-add-model',
  'open-edit-model',
  'toggle-enabled',
  'test-connection',
  'delete-model',
]);

const closeModal = () => emit('close');
const openAddModelForm = () => emit('open-add-model');
const openEditModelForm = (model_item) => emit('open-edit-model', model_item);
const toggleModelEnabled = (model_item) => emit('toggle-enabled', model_item);
const testModelConnection = (modelId) => emit('test-connection', modelId);
const deleteModel = (modelId, modelName) => emit('delete-model', modelId, modelName);
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Darker overlay */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(3px); /* Subtle blur effect */
}

.modal-content {
  background-color: white;
  padding: 30px; /* More padding */
  border-radius: 12px; /* More rounded */
  box-shadow: 0 8px 30px rgba(0,0,0,0.25); /* More prominent shadow */
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(1); /* Initial scale for animation */
  transition: transform 0.3s ease-out;
}
.model-management-modal {
   max-width: 900px; /* Even wider for better table display */
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e0e0e0; /* Lighter border */
  padding-bottom: 20px; /* More padding */
  margin-bottom: 25px; /* More margin */
}
.modal-header h2 {
  margin: 0;
  font-size: 1.8em; /* Larger heading */
  color: #2c3e50; /* Darker blue */
}
.close-button {
  background: none;
  border: none;
  font-size: 2.5em; /* Larger close button */
  cursor: pointer;
  color: #888;
  padding: 0;
  line-height: 1;
  transition: color 0.3s ease;
}
.close-button:hover {
  color: #333;
  transform: rotate(90deg); /* Spin effect on hover */
}

.add-model-button {
  margin-bottom: 25px; /* More margin */
  background-color: #007bff; /* Primary blue */
  color: white;
  padding: 12px 25px; /* More padding */
  border: none;
  border-radius: 8px; /* More rounded */
  cursor: pointer;
  font-size: 1.05em;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
}
.add-model-button:hover {
  background-color: #0056b3;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
.add-model-button:active {
  transform: translateY(0);
}

.models-table {
  width: 100%;
  border-collapse: separate; /* For rounded corners */
  border-spacing: 0;
  font-size: 0.95em; /* Slightly larger font */
  border-radius: 8px; /* Rounded table corners */
  overflow: hidden; /* Ensures rounded corners apply */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Subtle table shadow */
}
.models-table th, .models-table td {
  border: 1px solid #e0e0e0; /* Lighter border */
  padding: 12px 15px; /* More padding */
  text-align: left;
  vertical-align: middle;
}
.models-table th {
  background-color: #f8f8f8; /* Lighter header background */
  font-weight: 600;
  color: #333;
}
.models-table tr:first-child th:first-child { border-top-left-radius: 8px; }
.models-table tr:first-child th:last-child { border-top-right-radius: 8px; }
.models-table tr:last-child td:first-child { border-bottom-left-radius: 8px; }
.models-table tr:last-child td:last-child { border-bottom-right-radius: 8px; }

.models-table td .small-button {
  padding: 8px 12px; /* More padding */
  font-size: 0.9em;
  margin-right: 8px; /* More margin */
  color: white;
  border: none;
  border-radius: 6px; /* More rounded */
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.edit-button { background-color: #ffc107; } /* Warning yellow */
.edit-button:hover { background-color: #e0a800; transform: translateY(-1px); }
.delete-button { background-color: #dc3545; } /* Danger red */
.delete-button:hover { background-color: #c82333; transform: translateY(-1px); }
.test-button { background-color: #17a2b8; } /* Info blue */
.test-button:hover { background-color: #138496; transform: translateY(-1px); }
.small-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  transform: none;
}

.test-result {
  font-size: 0.85em;
  margin-top: 8px; /* More margin */
  padding: 5px 8px; /* More padding */
  border-radius: 5px; /* More rounded */
  font-weight: 500;
}
.test-success { color: #155724; background-color: #d4edda; border: 1px solid #c3e6cb; }
.test-failure { color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; }

.switch {
  position: relative;
  display: inline-block;
  width: 50px; /* Wider switch */
  height: 28px; /* Taller switch */
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 28px; /* Match height for full roundness */
}
.slider:before {
  position: absolute;
  content: "";
  height: 20px; /* Taller handle */
  width: 20px; /* Wider handle */
  left: 4px; /* Adjusted position */
  bottom: 4px; /* Adjusted position */
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: #28a745; /* Success green for enabled */
}
input:focus + .slider {
  box-shadow: 0 0 1px #28a745;
}
input:checked + .slider:before {
  transform: translateX(22px); /* Adjusted translation */
}
</style>
